<template>
  <div>
    <div v-if="isShowTopBar" class="c-flex-row c-justify-sb c-ph24 c-pt24 c-fs26 c-fc-xblack c-bg-white c-p" :class="feedList.length > 0 ? '':'c-pb24'">
      <div class="c-fs26 c-fc-xblack c-p borderL c-pl12" v-if="isShowDynamic || (isShowDynamic == false && feedList.length > 0)">{{isShowDynamic? isShowTypeName:isShowPermissTypeName}}</div>
      <div class="c-flex-grow1 c-w0 c-flex-row c-justify-end c-aligni-center" v-if="feedTop.hasPermission && isShowSelect">
        <div class="c-hh32 c-ph12 c-flex-row c-flex-center c-fs22 c-br16" v-for="(item, index) in selectList" :key="index" @click="handleClickChangeSelect(item, index)"
          :class="[index == selectIndex ?'theme-fc theme-bg-10':'c-fc-gray c-bg-sgray', index == selectList.length - 1 ? '':'c-mr24']">{{item.title}}</div>
      </div>
    </div>
    <!-- list -->
    <div v-for="(item, index) in feedList" class="c-bg-white c-mh24 c-bd-b1-f6 item-feed c-flex-row" :class="item.isEssence == 1 ? 'chosen':''" :key="index" @click.stop="getFeedsDetail(item, $event)">
      <!-- top -->
      <div class="c-ww64 c-hh64 c-brp50 c-flex-shrink0 c-mr20" @click.stop="handleClickCircleIndex(item)">
        <template v-if="item.questionDetailId > 0">
          <img class="c-w100 c-h c-brp50" v-if="item.isHidden == -1 && item.isMe != 1" src="@/assets/no_login_head.png" alt="">
          <img class="c-w100 c-h c-brp50" v-else v-lazy="item.headimgurl || require('@/assets/defult_head.png')" alt="">
        </template>
        <template v-else>
          <img class="c-w100 c-h c-brp50" v-lazy="item.headimgurl || require('@/assets/defult_head.png')" alt="">
        </template>
      </div>
      <div class="c-flex-1">
        <div class="c-flex-row c-justify-sb">
          <div class="c-flex-1 c-maxw440">
            <div class="c-fs24 c-fc-gray c-flex-row c-aligni-center" @click.stop="handleClickCircleIndex(item)">
              <template v-if="item.questionDetailId > 0">
                <span v-if="item.isHidden == -1 && item.isMe != 1">匿名者</span>
                <div class="c-text-ellipsis1" v-else>{{item.nickname}}</div>
              </template>
              <template v-else>
                <div class="c-text-ellipsis1">{{item.nickname}}</div>
              </template>
              <template v-if="item.isOldMaster == false">
                <span class="circle_m c-flex-shrink0 theme-bg" v-if="item.role == 2">圈主</span>
              </template>
              <template v-else>
                <span class="circle_m_g c-ml12 c-flex-shrink0"></span>
              </template>
              <div v-if="item.isTop == 1" class="c-flex-shrink0 top-tip theme-bg-10 theme-fc theme-bd1 c-br6 c-ml16">顶</div>
              <div v-if="item.isEssence == 1" class="c-flex-shrink0 chosen-tip c-ml16"></div>
            </div>
            <div class="c-fs20 c-fc-gray c-mt8">{{createdAtTime(item.createdAt)}}
              <span v-if="item.questionDetailId > 0">{{item.isAlreadyResponse?'提问：(已回答)':'提问:'}}</span>
            </div>
          </div>
          <div class="iconfont c-fc-gray c-ml16 c-flex-shrink0 c-pt2 operate-entry"
            v-if="feedTop.role == 2 || item.isSelf == true || (companyAuth.enableQuestionModule == 1 && feedTop.isAnswer == 1 && feedTop.role == 1 && (feedTop.isAllowTopEssence == 1 || feedTop.isAllowHideFeeds == 1))"
            @click.stop="handleClickOperation(item)">&#xe6db;</div>

        </div>
        <!-- content -->
        <div class="c-w100 c-pt16 c-pb24">
          <!-- 文字 -->
          <div class="c-fc-xblack c-fs26 c-p">
            <div class="c-hh30 c-ph6 c-fs22 c-flex-row c-aligni-center hideStatus c-inlineblack c-mr10 c-br4" v-if="item.status == -1 && item.role == 2 || feedTop.role == 2 && item.status == -1">
              <span class="hideStatus c-fs20">
                <i class="iconfont c-fs14 c-vcAlign-middle">&#xe703;</i> 隐藏
              </span>
            </div>
            <!-- <div class="c-hh30 c-ph6 c-fs22 c-flex-row c-aligni-center top c-inlineblack c-mr10 c-br4" v-if="item.isTop == 1">
              <span class="c-fs20 c-fc-xblue ">
                <i class="iconfont c-fs14 c-vcAlign-middle">&#xe704;</i> 置顶
              </span>
            </div> -->
            <!-- <div class="c-hh30 c-ph6 c-fs22 c-flex-row c-aligni-center select c-inlineblack c-mr10 c-br4" v-if="item.isEssence == 1">
                <span class="c-fs20 ">
                  <i class="iconfont c-fs14 c-vcAlign-middle">&#xe721;</i> 精选
                </span>
              </div> -->
            <div v-if="item.isShow && isShowThemeTag && item.theme" @click.stop="handleClickThemeRoute(item)" class="c-inlineblack c-vcAlign-middle theme-fc c-mr10 c-maxw242 c-text-ellipsis1">
              #{{item.theme.name}}
            </div>
            <div class="c-vcAlign-middle c-ww-bw c-inlineblack txt-con" v-show-morebtn v-if="item.resourceList.textStr != null" v-html="openlink(item.resourceList.textStr)"></div>
            <div class="more-txt-btn theme-fc c-pv8">查看全文<span class="iconfont icon-jiantou c-fs24"></span></div>
          </div>

          <!-- 图片列表 -->
          <div v-if="item.resourceList.imgArr != null" class="c-w100 c-flex-row c-flexw-wrap">
            <div v-for="(imgItem, imgIndex) in item.resourceList.imgArr" :key="imgIndex" class="c-ww160 c-hh160 c-text-hidden thumbnail c-br10"
              @click.stop="clickPreviewImage(imgItem, item.resourceList.imgArr, imgIndex)">
              <img class="c-w100 c-h img-pe-none c-object-fit-cover c-br10" v-lazy="$addXossFilter(imgItem || require('@/assets/defult270.png'))" alt="">
            </div>
          </div>

          <!-- 语音 -->
          <div v-if="item.resourceList.audioArr != null" :class="item.isTop == 1 || item.isEssence == 1 || item.resourceList.imgArr != null || item.resourceList.textStr != null ? 'c-mt16':''">
            <div class="c-flex-row c-aligni-center" v-for="(audioItem, audioIndex) in item.resourceList.audioArr" :key="audioIndex">
              <div @click.stop="clickPlayAudio(audioItem.content, audioItem.audioTime)" class="c-ww300 c-flex-row c-aligni-center c-justify-sb c-br30 c-pv6 c-pr20 c-pl6 theme-bg-10 theme-fc"
                :class="audioIndex == 2?'':'c-mb16'" v-if="audioIndex <= 2">
                <!-- <div
                  class="c-fs48 c-fc-xblue iconfont"
                  :class="playAduioSrc != item.resourceList.audioArr.content ? 'icon-bofang1':'icon-zanting4'"
                ></div> -->
                <!-- <img class="c-ww30 c-hh30 c-rotate180" v-if="playAduioSrc != audioItem.content" :src="require('@/assets/i/wap/course/chat_right_play.png')" alt="" /> -->
                <div class="c-bg-white c-ww48 c-hh48 c-br50 c-flex-row c-justify-center c-aligni-center">
                  <span class="iconfont c-fs22">{{playAduioSrc != audioItem.content ? '&#xe6dd;':'&#xe6de;'}}</span>
                </div>
                <div v-if="playAduioSrc == audioItem.content" class="audio-play-anim c-flex-row c-justify-center c-aligni-center">
                  <div class="item theme-bg"></div>
                  <div class="item theme-bg"></div>
                  <div class="item theme-bg"></div>
                  <div class="item theme-bg"></div>
                  <div class="item theme-bg"></div>
                  <div class="item theme-bg"></div>
                  <div class="item theme-bg"></div>
                  <div class="item theme-bg"></div>
                  <div class="item theme-bg"></div>
                  <!-- <div class="item"></div>
                  <div class="item"></div>
                  <div class="item"></div>
                  <div class="item"></div>
                  <div class="item"></div>
                  <div class="item"></div> -->
                </div>
                <!-- <img class="c-ww30 c-hh30 c-rotate180" v-else :src="require('@/assets/i/wap/course/chat_right_play.gif')" alt="" /> -->
                <!-- <div class="c-flex-row c-flex-center c-flex-1 c-fs24 theme-fc">点击播放</div> -->
                <!-- <div class="circle_progress c-flex-1">
                  <div
                    class="circle_progress_bar"
                    :style="{width: playAduioSrc != item.resourceList.audioArr.content ? 0 : progress + '%'}"
                  >
                    <span class="circle_round"></span>
                  </div>
                </div> -->
                <span class="c-fs22 theme-fc">{{audioItem.audioTime}}"</span>
              </div>
              <div class="c-fs20 c-fc-gray c-ml24" v-if="audioIndex == 2 && item.resourceList.audioArr.length > 3">共有{{item.resourceList.audioArr.length}}条语音</div>
            </div>
          </div>

          <!-- 文件 -->
          <div v-if="item.resourceList.fileArr.length" class="files-list c-ph10 c-mt20 c-pv10">
            <div @click.stop="downloadFile(fileItem)" v-for="(fileItem,fileIndex) in item.resourceList.fileArr" :key="fileIndex" class="c-fs24 c-fc-xblack c-flex-row c-aligni-center c-pv15">
              <div class="files-icon c-mr10 c-flex-shrink0" :class="fileItem.suffixClassName"></div>
              <div class="c-flex-1 c-text-hidden">
                <p class="c-text-ellipsis1">{{ fileItem.fileName }}</p>
              </div>
            </div>
          </div>
          <!-- 视频 -->
          <div class="c-mt16" v-if="item.resourceList.videoArr != null">
            <div @click.stop="clickShowVideo(item.resourceList.videoArr.content)" class="c-p c-ww320 c-hh180 c-fc-white c-flex-row c-flex-center">
              <i class="iconfont c-pa c-fs64 c-fc-white" v-if="item.resourceList.videoArr.videoLogo != ''">&#xe869;</i>
              <img class="c-w100 c-h c-br8 c-object-fit-cover"
                v-lazy="$addXossFilter(item.resourceList.videoArr.videoLogo, 'https://kposshzcdn.ckjr001.com/admin/material/9_material_admin/image/assets/i/wap/clockIn/video-bg1.png')" alt="">
            </div>
          </div>

          <!-- 直播 -->
          <div class="c-mt16" v-if="item.relationLive.length > 0">
            <div class="c-flex-row c-aligni-center c-br12 bg-fafafa c-hh92 c-br12 c-text-hidden" v-for="(liveItem, liveIndex) in item.relationLive" :key="liveIndex"
              @click.stop="clickGoLiveDetail(item.liveId, item.liveType)">
              <div class="c-ww140 c-h c-p c-flex-shrink0">
                <template v-if="item.liveType == 3">
                  <img class="c-w100 c-h c-object-fit-cover" :src="$addXossFilter(liveItem.cover, require('@/assets/defult270.png'))" alt="">
                </template>
                <template v-else>
                  <img class="c-w100 c-h c-object-fit-cover" :src="$addXossFilter(liveItem.avatar, require('@/assets/defult270.png'))" alt="">
                </template>
                <div class="c-pa c-p-l0 c-p-t0 theme-bg c-fs18 c-fc-white c-br-br12 c-hh28 c-ph10">他的推荐</div>
              </div>
              <div class="c-flex-1 c-flex-column c-justify-sb c-ml20 c-pv4 c-h c-br10">
                <div class="c-text-ellipsis2 c-fs22 c-fc-xblack">{{liveItem.name}}</div>
                <div class="c-flex-row c-justify-sb c-aligni-center">
                  <div class="c-fs20 c-fc-gray">
                    <span v-if="liveItem.payType == 2" class="c-fs18">{{'￥' | iosPriceFilter}}</span>
                    {{liveItem.payType | priceValueFilter(liveItem.price, 51)}}
                  </div>
                  <div class="c-flex-row c-flex-center c-hh26 c-ph8 c-br12 c-fs18 c-fc-white c-mr10" :class="statusClassName[liveItem.status]">
                    <div class="c-flex-row c-aligni-end c-mr6" v-if="liveItem.status==1">
                      <span class="pillar"></span>
                      <span class="pillar"></span>
                      <span class="pillar"></span>
                    </div>
                    {{statusMap[liveItem.status]}}
                  </div>
                </div>
              </div>
            </div>
          </div>
          <!-- 推荐课程 -->
          <ul class="c-liststyle-none c-mt16 c-maxw596" v-if="item.relationContent && item.relationContent.length > 0">
            <li @click.stop="handleClickRecommend(item)" class="c-flex-row c-aligni-center c-br12 bg-fafafa c-hh92 c-br12 c-text-hidden">
              <div class="c-ww140 c-h c-p c-flex-shrink0">
                <img class="c-w100 c-h c-object-fit-cover" :src="$addXossFilter(item.relationContent[0].cover || item.relationContent[0].avatar, require('@/assets/defult270.png'))" alt="">
                <div class="c-pa c-p-l0 c-p-t0 theme-bg c-fs18 c-fc-white c-br-br12 c-hh28 c-ph10">他的推荐</div>
              </div>
              <div class="c-flex-1 c-flex-column c-justify-sb c-ml20 c-pv4 c-h c-br10">
                <div class="c-text-ellipsis2 c-fs22 c-fc-xblack">{{item.relationContent[0].name}}</div>
                <div v-if="item.relationContent[0].payType == 2" class="c-fs18 c-fc-gray">{{item.relationContent[0].price}}</div>
              </div>
              <div class="c-flex-shrink0 theme-bd1 c-br30 c-fs18 c-ph16 c-pv4 c-mr10 theme-fc">查看</div>
            </li>
          </ul>
          <!-- 打卡 -->
          <div @click.stop="handleClickClockIn(item)" class="c-mt16 c-flex-row c-maxw596 theme-attend" v-if="item.signCardId">
            <div class="c-maxw596 c-pv4 c-ph20 c-fs22  c-br50 bg-fafafa c-bd1 theme-fc"><i class="iconfont c-fs20 c-pr8">&#xe6fd;</i>打卡任务<span class="c-fc-xblack c-ml10">参与讨论</span></div>
          </div>
          <!-- 主题 -->
          <div @click.stop="handleClickRelease(item)" class="c-mt16 c-flex-row c-maxw596 theme-attend" v-else-if="item.isShow">
            <div class="c-maxw596 c-pv4 c-ph20 c-fs22  c-br50 bg-fafafa c-bd1 theme-fc"><i class="iconfont c-fs20 c-pr8">&#xe6fd;</i>{{item.themeName}}<span class="c-fc-xblack c-ml10">参与讨论</span></div>
          </div>
        </div>
        <!-- 底部 -->
        <div class="c-flex-row c-justify-sb c-hh80 c-bd-t1-f6 operate-bottombar">
          <div @click.stop="like(index)" class="c-flex-row c-justify-start c-aligni-center w-1_3">
            <i class="iconfont" :class="item.isZans ? 'theme-fc':'c-fc-gray'">{{item.isZans ? `&#xe763;`:`&#xe764;`}}</i>
            <span class="c-ml12 c-fc-gray c-fs24">{{item.likeCount == 0 ? '':$options.filters.formatTenThousand(item.likeCount)}}</span>
          </div>
          <div @click.stop="getCircleComment(item.circleFeedsId, item.commentCount)" class="c-flex-row c-justify-center c-aligni-center c-p w-1_3">
            <i class="iconfont c-fc-gray">&#xe761;</i>
            <span class="c-ml12 c-fc-gray c-fs24">{{item.commentCount == 0 ? '':$options.filters.formatTenThousand(item.commentCount)}}</span>
          </div>
          <div @click.stop="handleClickForward(item)" class="c-flex-row c-justify-end c-aligni-center w-1_3">
            <i class="iconfont c-fc-gray">&#xe768;</i>
            <span class="c-ml12 c-fc-gray c-fs24"></span>
          </div>
        </div>
      </div>
    </div>
    <!-- 透明遮罩 -->
    <open-modal :openModal="selectFlag" @closeModal="handleClickSelect">
      <div class="c-bg-white c-br-tl20 c-br-tr20 c-pr24 c-pl24 c-maxh760 c-pb30">
        <div class="c-hh80 c-lh80 c-textAlign-c c-fs24" v-for="(item, index) in selectList" :class="[index == selectIndex ? 'theme-fc':'c-fc-xblack', index == selectList.length - 1 ? '':'c-bd-b1']"
          :key="index" @click="handleClickChangeSelect(item, index)">{{item.title}}</div>
        <div class="c-hh80 c-lh80 c-textAlign-c c-fs24 c-br36 c-bg-sgray c-fc-xblack" @click="handleClickSelect">取消</div>
      </div>
    </open-modal>
    <circle-recommend :showOpenModal="recommendModal" @handleClickCloseRecommend="handleClickCloseRecommend" :recommendObject="recommendObject"></circle-recommend>
  </div>
</template>

<script>
import { utilJs } from "@/utils/common.js";
import circleUtils from '@/utils/circleUtils.js';
import openModal from "@/components/templates/common/openModal.vue";
import circleRecommend from "@/components/homePage/circle/circleRecommend.vue";
export default {
  name: "CircleCommonList",
  components: {
    openModal,
    circleRecommend
  },
  props: {
    selectList: {
      type: Array,
      default: [{
        title: '全部',
        index: 0
      }, {
        title: '精选',
        index: 1
      }, {
        title: '置顶',
        index: 2
      }, {
        title: '圈主',
        index: 3
      }]
    },
    feedList: {
      type: Array,
      default: []
    },
    feedTop: {
      type: Object,
      default: null
    },
    playAduioSrc: {
      type: String,
      default: ""
    },
    progress: {
      type: Number,
      default: 0
    },
    isShowDynamic: {
      type: Boolean,
      default: true
    },
    isShowSelect: {
      type: Boolean,
      default: true
    },
    isShowTypeName: {
      type: Boolean,
      default: '动态'
    },
    selectIndex: {
      type: Number,
      default: 0
    },
    selectedName: {
      type: String,
      default: '全部'
    },
    isShowPermissTypeName: {
      type: String,
      default: '部分动态预览'
    },
    isShowTopBar: { //是否显示顶部的导航
      type: Boolean,
      default: true
    },
    isShowThemeTag: { //是否显示主题标签
      type: Boolean,
      default: true
    }
  },
  data() {
    return {
      theme: localStorage.getItem("colorName") || 'mb5_default',
      selectFlag: false,
      companyAuth: JSON.parse(localStorage.getItem("companyAuth")),
      recommendModal: false,
      statusMap: {
        0: "预告",
        1: "正在直播",
        2: "回放",
        3: "直播已结束",
        4: "已过期"
      },
      statusClassName: {
        0: 'status-0',
        1: 'status-1',
        2: 'status-2',
        3: 'status-3',
        4: 'status-4',
      },
      recommendObject: {}
    }
  },
  computed: {
    // relationContent() {
    //   return function (Array) {
    //     let nameText = Array.map((item) => {
    //       return item.name
    //     }).join('、')
    //     return nameText
    //   }
    // },
    createdAtTime() {
      return function (time) {
        let timeStr = utilJs.changeCommentTime(time);
        return timeStr;
      }
    },
    openlink() {
      return function (text) {
        /* eslint-disable */
        let title = text.replace(/[<>&"]/g, function (c) {
          return { '<': '&lt;', '>': '&gt;', '&': '&amp;', '"': '&quot;' }[c];
        })
        let titleReg = new RegExp('\n', "g");
        title = title.replace(titleReg, "<br>");
        if (!title) {
          return '';
        }
        if (title.length) {
          let reg = /(https?|ftp|file)(:\/\/[-A-Za-z0-9+&@#/%?=~_|!:,.;]+[-A-Za-z0-9+&@#/%=~_|])/g;
          title = title.replace(reg, function (txt) {
            return `<span class="theme-fc link">${txt}</span>`
          })
        }
        return title;
      }
    },
  },
  activated() {
    this.selectFlag = false;
    this.selectIndex = 0;
    this.selectedName = '全部';
    this.playAduioSrc = "";
  },
  methods: {
    handleClickRelease(data) {
      if (data.theme && !data.theme.perm) {
        this.$cjConfirm({
          title: '提示', //
          titleCenter: true, //标题是否居中
          message: '该主题设置了付费后参与,请先完成支付',
          messageCenter: true, //内容是否居中
          showMasker: true, //是否显示透明背景
          clickCloseModal: false, //是否点击透明背景关闭弹窗
          showCancelButton: true, //是否显示取消按钮
          cancelButtonText: '', //取消按钮文本
          confirmButtonText: '去支付', //确认按钮文本
          onConfirm: () => {
            let queryT = null;
            queryT = {
              cId: 0,
              extId: data.themeId,
              ckFrom: global.ckFrom.circleTheme,
              extraId: 0,
            }
            this.$routerGo(this, "push", {
              path: "/homePage/course/coursePay",
              query: queryT
            });
          }
        })
      } else {
        this.$emit("handleClickRelease", data);
      }
    },
    handleClickClockIn(data){
      this.$routerGo(this, "push", {
        path: "/homePage/circle/circlePlanClockinDetail",
        query:{
          circleId:data.circleId,
          clockinId:data.signCardId
        }
      });
    },
    handleClickRecommend(item) {
      this.recommendModal = true
      this.recommendObject = item
    },
    handleClickCloseRecommend() {
      this.recommendObject = {}
      this.recommendModal = false
    },
    handleClickChangeSelect(item, index) {
      // this.selectIndex = index;
      // this.selectedName = item.title;
      this.selectFlag = false;
      this.$emit("handleClickChangeSelect", item, index)
    },
    // 切换动态
    handleClickSelect() {
      this.selectFlag = !this.selectFlag;
    },
    clickGoLiveDetail(liveId, liveType) {
      this.$emit("clickGoLiveDetail", liveId, liveType)
    },
    clickPreviewImage(imgUrl, itemImgList, imgIndex) {
      this.$emit("clickPreviewImage", imgUrl, itemImgList, imgIndex);
    },
    clickPlayAudio(audioUrl, audioTime) {
      this.$emit("clickPlayAudio", audioUrl, audioTime);
    },
    clickShowVideo(videoSrc) {
      this.$emit("clickShowVideo", videoSrc);
    },
    handleClickForward(item) {
      this.$emit("handleClickForward", item);
    },
    like(index) {
      this.$emit("like", index);
    },
    getCircleComment(circleFeedsId, commentCount) {
      this.$emit("getCircleComment", circleFeedsId, commentCount);
    },
    handleClickOperation(item) {
      this.$emit("handleClickOperation", item)
    },
    getFeedsDetail(item, event) {
      this.$emit("getFeedsDetail", item, event)
    },
    handleClickThemeRoute(item) {
      this.$emit("handleClickThemeRoute", item)
    },
    handleClickCircleIndex(item) {
      this.$emit("handleClickCircleIndex", item)
    },
    downloadFile(data) {
      circleUtils.downloadFile(data, this)
    }
  },
  directives:{
    'show-morebtn':{
      // item.resourceList.videoArr
      inserted(element, binding){
        // console.log("show-morebtn-inserted", element.clientHeight, element.parentNode.clientHeight);
        if(element.clientHeight > 185){
          element.parentNode.classList.add('has-morebtn')
        }
      }
    }
  }
}
</script>

<style lang="scss" scoped>
@import "../../../assets/css/scss/circle.scss";
.question {
  display: inline-block;
  width: auto;
  height: 0.7rem;
  padding: 0 0.1rem;
  background: #e9fbf2;
  border: 0.025rem solid #23db85;
  border-radius: 0.1rem;
  color: #23db85;
  font-size: 0.5rem;
  text-align: center;
  line-height: 0.7rem;
}
.borderL:before {
  position: absolute;
  top: 50%;
  left: 0;
  width: 0.1rem;
  height: 0.5rem;
  margin-top: -0.25rem;
  background: var(--rgbcolor);
  content: "";
}
.circle_m {
  // display: inline-block;
  border-radius: 0.15rem;
  color: #fff;
  padding: 0.025rem 0.1rem;
  font-size: 0.5rem;
  margin: 0 0 0 0.2rem;
  // background: url("../../../assets/i/wap/circle/circle_m.png") no-repeat center
  //   center;
  // background-size: contain;
}
.top-tip {
  padding: 0.025rem 0.1rem;
  font-size: 0.5rem;
}
.circle_m_g {
  display: inline-block;
  width: 1.95rem;
  height: 0.7rem;
  background: url("../../../assets/i/wap/circle/circle_m_gray.png") no-repeat
    center center;
  background-size: contain;
}
.answericon {
  background: #ffe5e5;
  color: #ff4040;
  .iconfont {
    position: relative;
    // top: -1px;
    color: #ff4040;
  }
}
.top {
  background: #e8f4ff;
  .iconfont {
    position: relative;
    // top: -1px;
  }
}
.select {
  background: #fff1e5;
  color: #ff7800;
  .iconfont {
    position: relative;
    // top: -1px;
    color: #ff7800;
  }
}
.hideStatus {
  background: #f2f2f2;
  color: #999;
  .iconfont {
    position: relative;
    // top: -1px;
    color: #999;
  }
}
.thumbnail {
  margin-top: 0.2rem;
}
.thumbnail:nth-child(3n + 2) {
  margin-left: 0.2rem;
  margin-right: 0.2rem;
}
.circle_progress {
  position: relative;
  height: 0.1rem;
  margin: 0 0.5rem 0 0.8rem;
  border-radius: 0.1rem;
  background: #fff;
  .circle_progress_bar {
    position: absolute;
    top: 0;
    left: 0;
    width: 0;
    max-width: 100%;
    height: 0.1rem;
    border-radius: 0.1rem;
    text-align: right;
    transition: all 0.3s;
    -webkit-transition: all 0.3s;
    background: #2194ff;
    .circle_round {
      display: inline-block;
      position: absolute;
      top: 50%;
      width: 0.5rem;
      height: 0.5rem;
      transform: translateY(-50%);
      border: 0.1rem solid #2194ff;
      border-radius: 50%;
      background: #fff;
    }
  }
}
.audio_start {
  background: rgba(33, 148, 255, 0.1);
}
.pillar {
  width: 1px;
  margin: 0 1px;
  height: 0.1rem;
  background: #fff;
  border-radius: 5px;
  animation: pillarDance 2s infinite ease;
}
.pillar:first-child {
  animation-delay: 0.5s;
}
.pillar:nth-child(2) {
  animation-delay: 1s;
}
.pillar:nth-child(3) {
  animation-delay: 1.5s;
}
.status-0 {
  background: linear-gradient(90deg, #f74163, rgba(247, 65, 99, 0.7));
}
.status-1 {
  background: linear-gradient(90deg, #30b656, rgba(48, 182, 86, 0.7));
}
.status-2 {
  background: linear-gradient(90deg, #ff8920, #ffc26b);
}
.status-3 {
  background: linear-gradient(90deg, #406596, rgba(64, 101, 150, 0.7) 100%);
}
.status-4 {
  background: #cccccc;
}
@-webkit-keyframes pillarDance {
  0% {
    height: 0.1rem;
  }
  50% {
    height: 0.4rem;
  }
  100% {
    height: 0.1rem;
  }
}

.bg-fafafa {
  background: #fafafa;
}

.w-1_3 {
  width: 33.3333%;
}
.chosen-tip {
  width: 2.65rem;
  height: 1.3rem;
  background: url("../../../assets/i/wap/circle/jingxuan_1.png") no-repeat top
    center;
  background-size: 100% auto;
  margin-top: -0.6rem;
}
// .top-tip {
//   position: relative;
//   margin-top: -20px;
// }
.item-feed {
  padding: 1.1rem 0 0;
  &.chosen {
    padding-top: 1.25rem;
  }
  &:first-child {
    &.chosen {
      padding-top: 0.6rem;
    }
  }
}
.files-list {
  background: #fafafa;
  border-radius: 0.25rem;
  max-width: 12.5rem;
  overflow: hidden;
}
.more-txt-btn{
  display: none;
}
.has-morebtn{
  .txt-con{
    display: -webkit-box; -webkit-box-orient: vertical; -webkit-line-clamp: 10; overflow: hidden;
  }
  .more-txt-btn{
    display: block;
  }
}
</style>